<template>
	<div class="mod-config">
		<el-dialog title="外卖订单列表" :visible.sync="takeoutVisible" :close-on-click-modal="false" width="95%" center>
			<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
				<el-form-item><el-input v-model="dataForm.key" placeholder="单号/姓名/电话" clearable></el-input></el-form-item>
				<el-form-item><el-button @click="getDataList()">查询</el-button></el-form-item>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<el-form-item><el-button plain type="success" @click="getDataListPay(1)">已下单</el-button></el-form-item>
				<el-form-item><el-button plain type="danger" @click="getDataListPay(2)">配送中</el-button></el-form-item>
				<el-form-item><el-button plain type="infor" @click="getDataListPay(3)">已结账</el-button></el-form-item>
				<el-form-item>
					<el-select @change="getDataListByTime" v-model="timeSelect"  placeholder="时间">
						<el-option label="所有" value=""></el-option>
						<el-option label="15分钟" value="15"></el-option>
						<el-option label="30分钟" value="30"></el-option>
						<el-option label="1个小时" value="60"></el-option>
						<el-option label="2个小时" value="120"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
				  <el-select @change="getDataListByTime" v-model="staffId" placeholder="配送人">
					  <el-option label="所有" value=""></el-option>
				      <el-option
				        v-for="item in staffList"
				        :key="item.staffId"
				        :label="item.staffName"
				        :value="item.staffId">
				      </el-option>
				    </el-select>
				</el-form-item>
			</el-form>
			<el-table @row-click="orderDetail" :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
				<el-table-column prop="staffName" header-align="center" align="center" label="配送人"></el-table-column>
				<el-table-column prop="takeoutId" header-align="center" align="center" label="单号" ></el-table-column>
				<el-table-column prop="totalMoney" header-align="center" align="center" label="总价">
					<template slot-scope="scope">
						<div style="color: red;font-weight: 500;">￥{{ scope.row.totalMoney }}</div>
					</template>
				</el-table-column>
				<el-table-column prop="reallyGet" header-align="center" align="center" label="实收">
					<template slot-scope="scope">
						<div type="success" v-if="scope.row.reallyGet === null">----</div>
						<div style="color: red;font-weight: 500;" v-if="scope.row.reallyGet !== null">
							￥{{ scope.row.reallyGet }}
							<span v-show="scope.row.memberId !== null">【会员】</span>
							<span v-show="scope.row.accountId !== null">【记账】</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="number" header-align="center" align="center" label="份数"></el-table-column>
				<el-table-column prop="linkMan" header-align="center" align="center" label="联系人"></el-table-column>
				<el-table-column prop="linkTel" header-align="center" align="center" label="联系电话"></el-table-column>
				<el-table-column prop="address" header-align="center" align="center" label="配送地址" ></el-table-column>
				<el-table-column prop="time" header-align="center" align="center" label="时间"  ></el-table-column>
				<el-table-column prop="status" header-align="center" align="center" label="状态" width="90px">
					<template slot-scope="scope">
						<el-tag type="success" v-if="scope.row.status === 1">已下单</el-tag>
						<el-tag type="danger" v-if="scope.row.status === 2">派送中</el-tag>
						<el-tag type="info" v-if="scope.row.status === 3">已结账</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="foodVo" header-align="center" align="center" width="300px" label="菜品集合">
					<template slot-scope="scope">
						<div v-for="item in JSON.parse(scope.row.foodVo)">
							{{ item.foodName }}/{{ item.foodNum }}份
							<font style="color: red;">￥{{ item.total }}元</font>
						</div>
					</template>
				</el-table-column>
				<el-table-column fixed="right" header-align="center" align="center" width="100" label="操作">
					<template slot-scope="scope">
						<el-button v-if="scope.row.status === 1" type="success" size="small" @click="startTras(scope.row)">配送</el-button>
						<el-button v-if="scope.row.status === 2  && scope.row.reallyGet === 0"  type="danger" size="small" @click="jiezhang(scope.row)">结账</el-button>
						<el-button v-show="scope.row.status === 2 && scope.row.reallyGet !== 0" type="warning" size="small" @click="endTrans(scope.row)">完成配送</el-button>
						<el-tag type="info" v-show="scope.row.status === 3">已结账</el-tag>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="sizeChangeHandle"
				@current-change="currentChangeHandle"
				:current-page="pageIndex"
				:page-sizes="[10, 20, 50, 100]"
				:page-size="pageSize"
				:total="totalPage"
				layout="total, sizes, prev, pager, next, jumper"
			></el-pagination>
		</el-dialog>

		<PayComponent @refreshDataList="getDataList()" v-if="PayComponentVisible" ref="PayComponentRef"></PayComponent>

		<!-- 结账不需要打印小票 -->
		<!-- <PayComponent2 @refreshDataList="getDataList()" v-if="PayComponentVisible2" ref="PayComponentRef2"></PayComponent2> -->

		<!-- 开始配送支付打印 -->
		<WMPayPrint @DataIsNull="toPan" v-show="false" ref="WMPayPrintRef"></WMPayPrint>
	</div>
</template>

<script>
	import PayComponent from './Pay.vue'
	// import PayComponent2 from './Pay2.vue'
	import WMPayPrint from '../../modules/common/printTemplate/WaiMai/WMPayPrint.vue';
export default {

	data() {
		return {
			dataForm: {
				key: ''
			},
			dataList: [],
			pageIndex: 1,
			pageSize: 10,
			totalPage: 0,
			dataListLoading: false,
			dataListSelections: [],
			addOrUpdateVisible: false,
			takeoutVisible: false,
			PayComponentVisible:false,
			PayComponentVisible2:false,
			orderInfo:{},
			staffList:[],
			staffId:'',
			timeSelect:''
		};
	},
	components: {
		PayComponent,
		// PayComponent2,
		WMPayPrint
	},
	activated() {
		this.getDataList();

	},
	methods: {

		//订单详情
		orderDetail(row, column, event){
			console.log("detail       "+JSON.stringify(row))
		},

		//结账
		jiezhang(row){
			row.sign = 1 //格式化foodVo
			row.paySign = 2 //直接结账
			row.directPayFlag = true
			this.PayComponentVisible = true
			this.$nextTick(() => {
				this.$refs.PayComponentRef.init(row);
			})
		},

		endTrans(row){
			this.$confirm('是否结束配送订单为【'+row.takeoutId+'】的外卖吗？', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
				  this.$http({
				  	url: this.$http.adornUrl(`/reception/tstoretakeoutrecord/endTrans`),
				  	method: 'post',
				  	data: this.$http.adornData({
				  		"takeoutInfo": row
				  	})
				  }).then(({ data }) => {
				  	if (data && data.code === 0) {
				  		this.$message({
				  			message: '结束配送',
				  			type: 'success',
				  			duration: 1500
				  		});
						this.getDataList()
				  	}else{
				  		this.$message({
				  			message: data.msg,
				  			type: 'danger',
				  			duration: 1500
				  		});
				  	}
				  });
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '取消配送'
				  });
				});
		},

		toPan(){
			this.print()
		},

		//打印账单小票
		print(){
			this.orderInfo.eatType = '外卖';
			this.$nextTick(() => {
				this.$refs.WMPayPrintRef.init(this.orderInfo);
			});
		},

		//开始配送
		startTras(row){
			var foodVos = JSON.parse(row.foodVo)
			row.foodVos = foodVos
			row.foodVo = foodVos.toString()
			row.paySign = 2; //直接结账
			row.directPayFlag = false;
			this.orderInfo = row
			this.$confirm('是否开始配送外卖', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
				  this.$http({
				  	url: this.$http.adornUrl(`/reception/tstoretakeoutrecord/startTrans`),
				  	method: 'post',
				  	data: this.$http.adornData({
				  		"takeoutInfo": row
				  	})
				  }).then(({ data }) => {
				  	if (data && data.code === 0) {
				  		this.$message({
				  			message: '开始配送',
				  			type: 'success',
				  			duration: 1500
				  		});
						if(data.info.unitInfo !== null){
							this.orderInfo.unitInfo = data.info.unitInfo
						}else{
							this.orderInfo.unitInfo = {}
						}
						if(data.info.memberInfo !== null){
							this.orderInfo.memberInfos = data.info.memberInfo
						}else{
							this.orderInfo.memberInfos = {}
						}
						if(data.info.memberAccountDetailInfo !== null){
							this.orderInfo.memberAccountInfo = data.info.memberAccountDetailInfo
						}else{
							this.orderInfo.memberAccountInfo = {}
						}



						//this.print()
						this.getDataList()
				  	}else{
				  		this.$message({
				  			message: data.msg,
				  			type: 'danger',
				  			duration: 1500
				  		});
				  	}
				  });
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '取消配送'
				  });
				});
		},

		//按时间查询
		getDataListByTime(){
			this.$http({
				url: this.$http.adornUrl('/reception/tstoretakeoutrecord/listTakeout'),
				method: 'get',
				params: this.$http.adornParams({
					current: this.pageIndex,
					size: this.pageSize,
					key: this.dataForm.key,
					status: '',
					timeSelect: this.timeSelect,
					staffId:this.staffId
				})
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.dataList = data.page.records;
					this.totalPage = data.page.total;
				} else {
					this.dataList = [];
					this.totalPage = 0;
				}
				this.dataListLoading = false;
			});
		},

		//条件查询
		getDataListPay(status){
			this.$http({
				url: this.$http.adornUrl('/reception/tstoretakeoutrecord/listTakeout'),
				method: 'get',
				params: this.$http.adornParams({
					current: this.pageIndex,
					size: this.pageSize,
					key: this.dataForm.key,
					status: status,
					timeSelect: '',
					staffId:this.staffId
				})
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.dataList = data.page.records;
					this.totalPage = data.page.total;
				} else {
					this.dataList = [];
					this.totalPage = 0;
				}
				this.dataListLoading = false;
			});
		},

		// 获取数据列表
		getDataList() {
			this.$http({
			  url: this.$http.adornUrl('/store/tstorestaff/list'),
			  method: 'get',
			  params: this.$http.adornParams({
			    'page': 1,
			    'limit': 1000,
			  })
			}).then(({data}) => {
			  if (data && data.code === 0) {
			    this.staffList = data.page.list
			  } else {
			    this.staffList = []
			  }
			})
			this.takeoutVisible = true;
			this.dataListLoading = true;
			this.$http({
				url: this.$http.adornUrl('/reception/tstoretakeoutrecord/listTakeout'),
				method: 'get',
				params: this.$http.adornParams({
					current: this.pageIndex,
					size: this.pageSize,
					key: this.dataForm.key,
					status: '',
					timeSelect: '',
					staffId:this.staffId
				})
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.dataList = data.page.records;
					this.totalPage = data.page.total;
				} else {
					this.dataList = [];
					this.totalPage = 0;
				}
				this.dataListLoading = false;
			});
		},
		// 每页数
		sizeChangeHandle(val) {
			this.pageSize = val;
			this.pageIndex = 1;
			this.getDataList();
		},
		// 当前页
		currentChangeHandle(val) {
			this.pageIndex = val;
			this.getDataList();
		},
		// 多选
		selectionChangeHandle(val) {
			this.dataListSelections = val;
		},
		// 新增 / 修改
		addOrUpdateHandle(id) {
			this.addOrUpdateVisible = true;
			this.$nextTick(() => {
				this.$refs.addOrUpdate.init(id);
			});
		},
		// 删除
		deleteHandle(id) {
			var ids = id
				? [id]
				: this.dataListSelections.map(item => {
						return item.id;
				  });
			this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$http({
					url: this.$http.adornUrl('/reception/tstoretakeoutrecord/delete'),
					method: 'post',
					data: this.$http.adornData(ids, false)
				}).then(({ data }) => {
					if (data && data.code === 0) {
						this.$message({
							message: '操作成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.getDataList();
							}
						});
					} else {
						this.$message.error(data.msg);
					}
				});
			});
		}
	}
};
</script>
